vertical-alignの使い方。http://teamsanta.info/web/2399/

display: inline・display: block・display: inline-blockについて。http://taneppa.net/display-inline-block/

<!– html –>
<p class=”anago”><img src=”画像の名前”> テキストを中央揃え!</p>

/*css＝インライン要素にするimg*/
.anago img{
vertical-align:middle;
}

<!– html –>
<div class=”anagoBox02″>
<p><img src=”画像の名前” width=”200″ height=”200″ alt=”チンアナゴ”></p>
<p>・ウナギ目アナゴ科に属する海水魚の一種<br>
・日本では高知県から琉球列島にかけて分布<br>
・動物プランクトンを捕食している</p>
</div>

/*css＝でインライン要素にする*/
.anagoBox02 p{
display:inline-block;
vertical-align:middle;
}

/*css＝写真の高さに合わせて均等に割り振る*/
.anagoBox02 p{
display:inline-block;
vertical-align:top;
line-height:66px;/*画像の高さ÷テキストの行数*/
}

<!– html –>
<div class=”anagoBox03″>
<p><img src=”画像の名前” width=”200″ height=”50″ alt=”チンアナゴ”></p>
<ul>
<li>・ウナギ目アナゴ科に属する海水魚の一種</li>
<li>・日本では高知県から琉球列島にかけて分布</li>
<li>・動物プランクトンを捕食している</li>
</ul>
</div>

/*css*/
.anagoBox03 p, .anagoBox03 ul{
display:inline-block;
vertical-align:top;
line-height:50px;/*画像の高さと同じ数値*/
}